<template>
  <div class="list">
    <div class="like1">猜你喜欢</div>
            <div class="paixu">
                <span :class="{active:gaoliang1==index}" @click="jilu(index)" v-for="(item,index) in like" :key="index">{{item}}</span>
            </div>
            <div class="paixu">
                <span class="paixu1 font" v-for="(item,index) in reduce" :key="index">{{item}}</span>
            </div>
    <div class="shop" v-for="(item, index) in list" :key="index">
      <div class="left">
        <img :src="item.pic" class="pic" />
      </div>
      <div class="right">
            <div class="name">{{ item.name }}</div>
            <div>
            <span class="estimate">{{ item.estimate }}</span
            >&nbsp;
            <span class="month_sales">月售:{{ item.month_sales }}</span>
            </div>
            <div>
             <span class="price">起送￥{{ item.price }}</span>&nbsp;
             <span class="send">远距离配送￥{{ item.send }}</span>
            <div class="peisong">
                <span class="time">{{ item.time }}分钟</span>
                <span class="distance">{{ item.distance }}km</span>
            </div>
            </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        like: [
            '综合排序', '距离最近', '销量最高', '筛选'
        ],
        reduce: [
            '年货节热卖', '津贴联盟', '满减优惠', '品质联盟'
        ],
        list: [
        {
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdnq.duitang.com%2Fuploads%2Fblog%2F201403%2F16%2F20140316003415_cdQHe.jpeg&refer=http%3A%2F%2Fcdnq.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668087596&t=eb77baaa6182ffdfd3d48e2c4f39846a",
          name: "鱼和你在一起",
          estimate: "4.3",
          month_sales: "1632",
          price: "20",
          send: "3",
          time: "47",
          distance: "3.9",
        },
        {
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew4.photophoto.cn%2F20091020%2Fhongshaorouhuifantupian-15307502_1.jpg&refer=http%3A%2F%2Fpicnew4.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668087596&t=d618ec3b1759096b40dea1cad531c3f6",
          name: "鱼和你在一起",
          estimate: "4.5",
          month_sales: "1632",
          price: "10",
          send: "3",
          time: "47",
          distance: "3.9",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.list{
    width: 100%;
    padding: 0px 3px;
}
.like1 {
        margin: 10px 0px;
        font-weight: 700;
    }
    .paixu {
        display: flex;
        text-align: center;
        justify-content: space-between;
    }
    
    .paixu .paixu1 {
        margin: 5px 0px;
        width: 25%;
        margin-bottom: 10px;
        /* background-color: aqua; */
        justify-content: space-between;
    }
    
    .paixu .font {
        font-size: 12px;
        color: darkslategray;
        /* border: 1px solid red; */
        background-color: #f5e9e9;
        width: 20%;
        padding: 5px;
    }
    
.paixu {
        display: flex;
        text-align: center;
        justify-content: space-between;
    }
.shop {
  padding: 5px;
  margin-bottom: 10px;
  display: flex;
  height: 100px;
//   background-color: brown;
  border: 1px solid #c9c1c1;
}

.shop .left {
    // float: left;
  width: 30%;
  height: 100%;
  /* background-color: red; */
}

.shop .left img {
  width: 100%;
  height: 100%;
  border: 1px solid #aea4a4;
}

.shop .right {
    // background-color: steelblue;
  font-size: 12px;
  color: #676565;
  margin-left: 10px;
  float: right;
  height: 130px;
}

.shop .right .name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 7px;
  color: black;
}

.shop .right .peisong {
  float: right;
  padding-left: 17px;
  /* background-color: violet; */
  right: 2px;
}

.shop .right .name .app {
  width: 100%;
  height: 60px;
  color: white;
  font-weight: 700;
  /* padding: 10px; */
  background-color: deepskyblue;
}
</style>